<template>
<el-upload
  :drag="drag"
  :action="uploadUri"
  :multiple="multiple"
  :limit="limit"
  :headers="headers"
  :show-file-list="false"
  :with-credentials="withCredentials"
  :on-success="uploadSuccess"
  :on-progress="onUploading"
  :on-exceed="onExceed"
  :before-upload="beforeUpload">

  <i class="el-icon-upload"></i>
  <div v-if="drag" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div v-else>点击上传</div>
  <div class="el-upload__tip" slot="tip">上传文件不可超过{{size}}kb</div>
  <el-progress slot="tip" v-show="showUploading" :percentage="uploadPercent" :status="uploadPercent == 100 ? 'success':null"></el-progress>
</el-upload>
</template>
<script>
export default {
  props:{
    drag: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 10
    },
    withCredentials:{
      type: Boolean,
      default: true
    },
    group:{
      type: String,
      default: 'sys'
    },
    path: {
      type: String,
      default: '/'
    },
    size:{
      type: Number,
      default: 1024
    },
    mimeTypes:{
      type: Array,
      default() {
        return []
      }
    }
  },
  data(){
    return {
      uploadPercent: 0,
      showUploading: false,
      fileDatas:[],
      fileTypes: {
        rar: require("@/assets/img/rar.png"),
        "7z": require("@/assets/img/zip.png"),
        zip: require("@/assets/img/zip.png"),
        pdf: require("@/assets/img/pdf.png"),
        jpg: require("@/assets/img/pic.png"),
        jpeg: require("@/assets/img/pic.png"),
        gif: require("@/assets/img/pic.png"),
        bmp: require("@/assets/img/pic.png"),
        ico: require("@/assets/img/pic.png"),
        png: require("@/assets/img/pic.png"),
        doc: require("@/assets/img/doc.png"),
        docx: require("@/assets/img/docx.png"),
        xls: require("@/assets/img/xls.png"),
        xlsx: require("@/assets/img/xlsx.png"),
        ppt: require("@/assets/img/ppt.png"),
        pptx: require("@/assets/img/ppt.png"),
        txt: require("@/assets/img/txt.png"),
        json: require("@/assets/img/txt.png"),
        xml: require("@/assets/img/txt.png"),
      }
    }
  },
  computed: {
    uploadUri(){
      return `${this.$service.storage.upload}/${this.group}?path=${this.path}` ;
    },
    headers(){
      return {
        Authorization: `Bearer ${this.$store.state.token}`
      }
    }
  },
  watch: {
  },
  mounted(){
  },
  methods:{
    beforeUpload(file){

      return new Promise((resolve, reject) => {
        const validType = this.mimeTypes == null || this.mimeTypes.length <= 0 || this.mimeTypes.any(t => t === file.type);
        const validLen = file.size / 1024 < this.size;

        if (!validType) {
          alert(`上传格式只能是 ${this.mimeTypes.join(',')} 格式!`);
          reject();
        }
        if (!validLen){
          alert(`上传文件不可超过${this.size}KB！`, "提示", "warning");
          reject();
        }
        else{
          this.$service.file.checkFile({
            routeData: {group: this.group},
            data:{path: this.path, fileName: file.name}
          }).then((r)=>{
            if (r.success){
              this.uploadPercent = 0;
              this.showUploading = true;
              resolve();
            }
            else{
              confirm(`文件${file.name}已经存在，要覆盖吗？`, "提示", "info", ()=>{
                this.uploadPercent = 0;
                this.showUploading = true;
                resolve();
              }, reject);
            }
          }).catch(reject);
        }

      });
    },
    uploadSuccess(response, file, fileList){
      if(response.success && response.data) {

        this.showUploading = false;
        this.$emit('onSuccess', response);
      }

    },
    onUploading(event, files, fileList){
      this.uploadPercent = Math.floor(event.percent);
    },
    onExceed(file, fileList){
      alert(`一次最多只能上传${this.limit}个文件`);
    }
  }
}
</script>
